<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Vue -->
  <script src="../js/vue.js"></script>
  <title>5.姓名案例监视属性实现</title>
</head>

<body>
  <!-- 
    computed与watch之间的区别:
      1.computed能完成的功能,watch都可以完成
      2.watch能完成的功能,computed不一定能完成,礼物:watch可以进行异步操作
    两个重要的小原则:
      1.所有被Vue管理的函数,最好写成普通函数,这样this的指向才是VM或者组件实例对象
      2.所有不被Vue管理的函数(定时器的回调函数,Ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm或者组件实例对象
   -->
  <!-- 创建一个容器 -->
  <div id="root">
    姓:<input type="text" v-model="firstName"><br>
    名:<input type="text" v-model="lastName"><br>
    <!-- 计算属性 -->
    全名:<span>{{fullName}}</span>
  </div>

  <script>
    Vue.config.productionTip = false
    let a;
    // 创建一个实例
    const vm = new Vue({
      el: '#root',
      data() {
        return {
          firstName: '张',
          lastName: '三',
          fullName:'张-三'
        }
      },
      // 监视属性实现
      watch:{
        firstName(newValue,oldValue){
          // 延迟1S后执行 etTimeout和setInterval都属于JS中的定时器，可以规定延迟时间再执行某个操作，不同的是setTimeout在规定时间后执行完某个操作就停止了；而setInterval则可以一直循环下去，要想停止，可用window.clearInterval( );
          setTimeout(() => {
            this.fullName = newValue + '-' + this.lastName
          }, 1000);
        },
        lastName(newValue,oldValue){
          this.fullName = this.firstName + '-' + newValue
        }
      }
    })
  </script>
</body>

</html>